<template>
  <div class="wrap">
    <div class="wrap_left">
      <div
        :class="item.id == activeTab ? 'wrap_left_item wrap_left_item_nomal_active' : 'wrap_left_item'"
        v-for="item in tabsList"
        :key="item.id"
      >
        <div class="wrap_left_item_new" v-if="item.id == 'new'" @click="changePane(item.id)">
          <a-icon class="wrap_left_item_new_icon" type="plus" /><span class="wrap_left_item_new_text">新增</span>
        </div>
        <div class="wrap_left_item_nomal" v-else @click="changePane(item.id)">
          <div class="wrap_left_item_apply">申请表：{{ item.id }}</div>
          <div class="wrap_left_item_ent">
            企业表：{{ $store.state.formJson.formObj.CUSTOM[item.id].attrForm.table }}
          </div>
        </div>
      </div>
    </div>
    <div class="wrap_right">
      <div class="wrap_right_action">
        <div>
          <span>自动回显：</span>
          <a-switch
            v-model="$store.state.formJson.formObj.CUSTOM[activeTab].auto"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
        <div class="wrap_right_action_button">
          <a-button type="danger" class="wrap_right_action_button_delete" @click="reset">重置</a-button>
          <a-button type="danger" @click="remove" v-if="activeTab != 'new'">删除</a-button>
          <a-button type="primary" @click="save" v-if="activeTab == 'new'">保存</a-button>
        </div>
      </div>
      <BasePaneItem class="wrap_right_pane" type="CUSTOM" :typeSecond="activeTab"></BasePaneItem>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabsList: [], // 标签列表
      activeTab: 'new' // 激活状态下的标签页
    }
  },
  components: {
    BasePaneItem: () => import('@/views/businessAssembly/jsonComponent/basePaneItem.vue')
  },
  mounted() {
    for (let key in this.$store.state.formJson.formObj.CUSTOM) {
      this.tabsList.push({
        id: key,
        name: key
      })
    }
  },
  methods: {
    // 切换标签页
    changePane(id) {
      this.activeTab = id
    },
    // 重置
    reset() {
      this.$store.state.formJson.formObj.CUSTOM[this.activeTab] = {
        attrForm: {
          apltable: '',
          title: '',
          table: '',
          yjctable: '',
          type: 'single',
          autoacho: 'true',
          params: {},
          paramsList: [],
          filter: {},
          fiterList: []
        },
        filedList: [],
        auto: false
      }
    },
    // 删除
    remove() {
      let index
      this.tabsList.some((v, i) => {
        if (v.id == this.activeTab) {
          index = i
        }
      })
      delete this.$store.state.formJson.formObj.CUSTOM[this.activeTab]
      this.tabsList.splice(index, 1)
      this.activeTab = 'new'
    },
    // 保存
    save() {
      let attrForm = this.$store.state.formJson.formObj.CUSTOM.new.attrForm
      if (!attrForm.apltable) {
        this.$message.warning('请选择申请表！')
        return
      }
      if (!attrForm.table && !attrForm.yjctable) {
        this.$message.warning('请选择企业表或申请表！')
        return
      }
      let key = attrForm.apltable.toUpperCase()
      let toolObj = {}
      this.tabsList.forEach(v => {
        toolObj[v.id] = v.id
      })
      if (key in toolObj) {
        this.$message.warning('重复的申请表！')
        return
      }
      let tempObj = {
        attrForm: attrForm,
        filedList: this.$store.state.formJson.formObj.CUSTOM.new.filedList,
        auto: this.$store.state.formJson.formObj.CUSTOM.new.auto
      }
      this.$set(this.$store.state.formJson.formObj.CUSTOM, key, tempObj)
      this.tabsList.push({
        id: key,
        name: key
      })
      this.$store.state.formJson.formObj.CUSTOM.new = {
        attrForm: {
          apltable: '',
          title: '',
          table: '',
          yjctable: '',
          type: 'single',
          autoacho: 'true',
          params: {},
          paramsList: [],
          filter: {},
          fiterList: []
        },
        filedList: [],
        auto: false
      }
      this.activeTab = key
      this.$message.success('保存成功！')
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
}

.wrap_left {
  width: 22%;
  border-right: 1px solid #d3d3d3;
  padding-right: 20px;
  height: 100%;
}

.wrap_left_item {
  border-radius: 10px;
  padding: 10px;
  background-color: rgb(213, 246, 255);
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 20px;
}

.wrap_left_item_nomal_active {
  border: 1px solid rgb(137, 255, 147);
}

.wrap_left_item:last-child {
  margin-bottom: 0;
}

.wrap_left_item_new {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrap_left_item_new_icon {
  font-size: 20px;
  color: #1890ff;
}

.wrap_left_item_new_text {
  font-size: 16px;
  margin-left: 10px;
}

.wrap_left_item_ent {
  margin-top: 10px;
}

.wrap_right {
  width: 77%;
}

.wrap_right_action {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.wrap_right_action_button {
  text-align: right;
}

.wrap_right_action_button_delete {
  margin-right: 20px;
}

.wrap_right_pane {
  margin-top: 20px;
}
</style>
